<template>
  <cover-view class="nav-container">
    <cover-view class="nav-content" :style="[{height: navBarHeight + 'px'}]">
      <!-- 状态栏 站位-->
      <cover-view class="nav-status-bar" :style="{height: statusBarHeight + 'px'}"></cover-view>
      <!-- 底部导航栏 -->
      <cover-view class="nav-title-bar rowBC" :style="[{height: titleBarHeight + 'px'}]">
        <cover-view class="flex-1">
          <slot name="navLf">
            nav-lf
          </slot>
        </cover-view>
        <cover-view>
          <slot name="navCenter">
            nav-center
          </slot>
        </cover-view>
        <cover-view class="flex-1">
          <slot name="navRt">

          </slot>
        </cover-view>
      </cover-view>
    </cover-view>
  </cover-view>
</template>

<script>
  export default {
    props: {

    },
    data () {
      return {
        statusBarHeight: '', // 状态栏高度
        titleBarHeight: '', // 标题栏高度
        navBarHeight: '', // 导航栏总高度
      }
    },
    /*
      生命周期总结
    * 1.页面 onLoad onShow
    * 2.created mounted
    * */
    created(){
      //获取系统信息
      uni.getSystemInfo({
        success:(sysInfo)=> {
          console.log("sysInfo",sysInfo);
          //ios或开发者工具
          if(/ios/i.test(sysInfo.platform)||sysInfo.platform==="devtools"){
            this.titleBarHeight=44
          }else{//android
            this.titleBarHeight=48
          }
          this.statusBarHeight=sysInfo.statusBarHeight
          this.navBarHeight=sysInfo.statusBarHeight+this.titleBarHeight
        }
      });
    },
    mounted () {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
   .nav-container{
     width: 100vw;

   }

  /*导航主体*/
  .nav-content{
    background-color: #fff;
  }
</style>
